<template>
  <div class="container">
    <div class="container-content">
      <vab-query-form>
        <vab-query-form-top-panel>
          <el-form
            :inline="true"
            label-width="80px"
            :model="tableOptions.queryForm"
          >
            <el-form-item label="分类名称">
              <el-input
                v-model="tableOptions.queryForm.catelogName"
                placeholder="分类名称"
              />
            </el-form-item>
            <el-form-item label="表单名称">
              <el-input
                v-model="tableOptions.queryForm.formName"
                placeholder="表单名称"
              />
            </el-form-item>
            <el-form-item label="状态" prop="catelogStatus">
              <easy-dict-select
                v-model:default-value="tableOptions.queryForm.catelogStatus"
                dict-code="1002"
                show-all="Y"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                icon="refresh-left"
                type="warning"
                @click="handleResetQuery"
              >
                重置
              </el-button>
              <el-button icon="search" type="primary" @click="queryTableData">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-top-panel>
        <vab-query-form-left-panel :span="24">
          <el-button icon="circle-plus" type="primary" @click="handleAdd">
            添加
          </el-button>
        </vab-query-form-left-panel>
      </vab-query-form>
      <el-table
        ref="tableRef"
        v-loading="tableOptions.loading"
        border
        stripe
        :data="tableOptions.dataList"
        :height="tableOptions.height"
        :cell-style="tableStyle.cellStyle"
        :header-cell-style="tableStyle.headerCellStyle"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children', checkStrictly: true }"
        @sort-change="handleSortChange"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column
          align="center"
          show-overflow-tooltip
          type="selection"
          width="50"
        />
        <el-table-column label="序号" type="index" width="55">
          <template #default="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          label="分类名称"
          prop="catelogName"
          width="280"
        />
        <el-table-column
          align="center"
          label="分类状态"
          prop="catelogStatusDesc"
          width="120"
        />
        <el-table-column
          align="center"
          label="配置表单"
          prop="formName"
          width="180"
        />
        <el-table-column
          align="center"
          label="排序号"
          prop="orderId"
          width="80"
        />
        <el-table-column
          align="center"
          :formatter="datetimeFormat"
          label="创建时间"
          prop="createTime"
          width="160"
        />
        <el-table-column
          align="center"
          :formatter="datetimeFormat"
          label="修改时间"
          prop="updateTime"
          width="160"
        />
        <el-table-column align="center" fixed="right" label="操作" width="140">
          <template #default="{ row }">
            <el-button size="small" type="warning" @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <CatelogEdit ref="editRef" width="50%" @confirm="queryTableData" />
    </div>
  </div>
</template>
<script setup lang="ts" name="ConfigCatelog">
import { useMessage, useMessageBox } from "@/hooks/message";
import { datetimeFormat } from "@/utils/common";
import { queryTreeTable, deleteObjs } from "@/api/admin/system/configcatelog/";
import { useTable } from "@/hooks/table";
import type { BasicTableProps } from "@/hooks/table";
import EasyDictSelect from "@/components/dictSelect.vue";
import CatelogEdit from "./components/formEdit.vue";

const tableRef = ref(null);
const editRef = ref(null);

const tableOptions = reactive<BasicTableProps>({
  autoLoad: true,
  isPage: false,
  queryForm: {
    catelogName: "",
    formName: "",
    catelogStatus: "ALL"
  },
  queryFunction: queryTreeTable,
  ascs: ["order_id"]
});

const {
  tableStyle,
  queryTableData,
  handleSelectionChange,
  handleResetQuery,
  handleRowClick,
  handleSortChange,
  handleToggleHeight
} = useTable(tableOptions, tableRef);

onMounted(() => {
  handleToggleHeight(-50);
});

const handleAdd = () => {
  const row = {};
  editRef.value.show(row);
};

const handleEdit = row => {
  if (row.id) {
    editRef.value.show(row, false);
  } else {
    useMessage().error("未选中任何行");
  }
};

const handleDelete = row => {
  if (row && row.id) {
    useMessageBox()
      .confirm("删除的数据将无法恢复，是否继续")
      .then(async () => {
        deleteObjs(row.id).then(res => {
          if (res.code === 200) {
            useMessage().success("删除成功");
            queryTableData();
          } else {
            useMessage().success(res.msg);
          }
        });
      });
  }
};
</script>
